✨ [Frontend] Feature: sync with `projectDocument:updated` WS #8165

odeimaiz · 2025-07-26T16:10:38Z

What do these changes do?

This PR implements the 1st iteration on the WebSocket synchronization for the projectDocument:updated event to enable Real Time Collaboration features.

Client 1 makes a change in its pipeline
This not-so-atomic change -PATCH (actually jsondiffpatch's deltas) is sent to the backend (the jsonPATCH is also calculated but not transmitted, this might come in the future)
The backend applies the patch and broadcasts that whole project document together with a version number to all the clients in the room
The frontend (if the patch was generated by itself (clientSessionId) or the version number is lower than the current, it will discard it) compares the project document with its current project. It will compute the deltas, convert those deltas into proper jsonPATCHES and apply them

Notes:

In order to compare the project in projectDocument:updated and frontend's project, both objects need to be curated
This patches need to be sorted so that they are applied carefully:
- If a node was deleted, it will be the first patch to apply
- Then the new nodes (not implemented yet)
- And last, the updates to currently existing elements
In order to avoid echo loops, while the patches from client1 are applied, the updates from client2 are blocked

Missing actions to sync, in order to avoid corrupted studies, userB will be logged out.

add node
change inputsRequired

Bonus:

Upgraded jsondiffpatch library to its latest version. Own build to include the delta-to-jsonPATCH (RFC 6902) formatter.
Adds client session ID tracking to HTTP headers for better conflict detection

Study changes:

Workbench changes and Run pipeline:

Dynamic service:

Study UI changes:

Related issue/s

How to test

Dev-ops

…parc-simcore into feature/event-driven-patches

Copilot

Pull Request Overview

This PR implements the first iteration of WebSocket synchronization for projectDocument:updated events to enable real-time collaboration features. The implementation allows multiple clients to synchronize pipeline changes through WebSocket broadcasts, with conflict detection and automatic patch application.

Adds WebSocket listener for projectDocument:updated events with conflict detection via client session ID
Implements JSON patch-based synchronization using upgraded jsondiffpatch library (v0.7.3)
Adds support for real-time UI updates including node positions, annotations, and edges

Reviewed Changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
JsonDiffPatch.js	Upgrades library to v0.7.3 and adds delta-to-JSON patch conversion
StudyEditor.js	Implements WebSocket project document synchronization and patch application
Workbench.js	Adds support for updating workbench from JSON patches
StudyUI.js	Implements UI patch handling for annotations and node UI changes
Study.js	Adds study-level patch handling methods
Node.js	Adds node-level patch application and position change events
WorkbenchUI.js	Adds edge creation/removal event handling and annotation listeners
NodeUI.js	Adds position change listener for real-time updates
Resource.js	Adds client session ID to HTTP headers
Various other files	Minor fixes and improvements for robustness

services/static-webserver/client/source/class/osparc/wrapper/JsonDiffPatch.js

services/static-webserver/client/source/class/osparc/data/model/Node.js

services/static-webserver/client/source/class/osparc/data/model/Workbench.js

services/static-webserver/client/source/class/osparc/data/model/StudyUI.js

services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js

services/static-webserver/client/source/class/osparc/data/model/Node.js

matusdrobuliak66

💪

GitHK · 2025-07-30T12:19:56Z

In order to avoid echo loops, while the patches from client1 are applied, the updates from client2 are blocked

What does this refer to? From what I've seen in a PR from @matusdrobuliak66 this should not be possible. Can you please clarify this part

odeimaiz · 2025-07-30T20:03:30Z

In order to avoid echo loops, while the patches from client1 are applied, the updates from client2 are blocked

What does this refer to? From what I've seen in a PR from @matusdrobuliak66 this should not be possible. Can you please clarify this part

In our case, avoiding an echo loop means preventing client B from re-sending to the backend the changes it just applied from client A, since the backend already has those.

There are more ways to avoid this useless patches, but with the current approach of the frontend not sending granular patches and the backend broadcasting the entire project document, I find this is the safest solution.

sonarqubecloud · 2025-07-30T20:08:23Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

GitHK · 2025-07-31T03:08:51Z

In order to avoid echo loops, while the patches from client1 are applied, the updates from client2 are blocked

What does this refer to? From what I've seen in a PR from @matusdrobuliak66 this should not be possible. Can you please clarify this part

In our case, avoiding an echo loop means preventing client B from re-sending to the backend the changes it just applied from client A, since the backend already has those.

There are more ways to avoid this useless patches, but with the current approach of the frontend not sending granular patches and the backend broadcasting the entire project document, I find this is the safest solution.

Think I got it, the backend keeps track of the latest version, but nothing stops the frontend from sending the same data as a new update, which could even be a legitimate use case.

GitHK

Thanks, and I've noticed how you "cheated" with the jupyter!

sanderegg

nice!

odeimaiz and others added 30 commits July 24, 2025 11:13

add timeout to make sure the node is saved before starting it

eb700be

remove intervals

7cbed89

updateStudyDocument with data and remove restartAutoSaveTimer

18d423a

listenToStudyChanges

c7b1efe

Merge branch 'master' into feature/event-driven-patches

13ec4e5

Merge branch 'feature/event-driven-patches' of github.com:odeimaiz/os…

889afcb

…parc-simcore into feature/event-driven-patches

listenToChanges Node

dfc7a78

minor

ac4c7e6

listenToChanges Node

2fb6663

don't duplicate

0dd19a0

comment

d4d0fca

unused

c84ee62

serialize nodeUI

e220eac

bring back old way

d4b0756

minor

f65be44

marker and position

ec4b52b

eventDrivenPatch

f71c76c

minor

4d3e3ef

minor

6d7dbb3

fixes

3586b91

Merge branch 'master' into feature/event-driven-patches

e1f2e9c

Merge branch 'feature/event-driven-patches' of github.com:odeimaiz/os…

d40ea33

…parc-simcore into feature/event-driven-patches

minor

fb8dfff

multi move

8a221f1

marker under control

72db3f8

minor

505baec

minor

ba8df3e

unused

9533368

IgnoreChangesProps

c877e74

refactor

8c31960

odeimaiz added 2 commits July 30, 2025 10:35

createEdge

2dfbdb6

remove edge

5383213

odeimaiz requested a review from Copilot July 30, 2025 08:51

odeimaiz marked this pull request as ready for review July 30, 2025 08:52

This comment was marked as outdated.

Sign in to view

odeimaiz added 3 commits July 30, 2025 10:56

minor

05136ac

remove logs

2d5ebae

not needed

1d4abf7

odeimaiz requested review from GitHK, Copilot, giancarloromeo, matusdrobuliak66, pcrespov and sanderegg July 30, 2025 09:42

minor

cf6281c

Copilot AI reviewed Jul 30, 2025

View reviewed changes

matusdrobuliak66 approved these changes Jul 30, 2025

View reviewed changes

the first (add) or last (remove) annotation

4544620

odeimaiz added 2 commits July 30, 2025 22:05

Merge branch 'master' into feature/listenToProjectDocumentWS

656da92

@matusdrobuliak66 was faster

448b7dc

GitHK approved these changes Jul 31, 2025

View reviewed changes

sanderegg reviewed Jul 31, 2025

View reviewed changes

odeimaiz merged commit 2c424ad into ITISFoundation:master Jul 31, 2025
59 checks passed

odeimaiz deleted the feature/listenToProjectDocumentWS branch August 5, 2025 07:17

This was referenced Aug 5, 2025

🚀 Release v1.84.0 #7947

Closed

🚀 Pre-release master -> staging_Engage9 #8189

Closed

✨ [Frontend] Feature: sync with projectDocument:updated WS #8165

✨ [Frontend] Feature: sync with projectDocument:updated WS #8165

Uh oh!

Conversation

odeimaiz commented Jul 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What do these changes do?

Related issue/s

How to test

Dev-ops

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

matusdrobuliak66 left a comment

Choose a reason for hiding this comment

Uh oh!

GitHK commented Jul 30, 2025

Uh oh!

odeimaiz commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud bot commented Jul 30, 2025

Quality Gate passed

Uh oh!

GitHK commented Jul 31, 2025

Uh oh!

GitHK left a comment

Choose a reason for hiding this comment

Uh oh!

sanderegg left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

✨ [Frontend] Feature: sync with `projectDocument:updated` WS #8165

✨ [Frontend] Feature: sync with `projectDocument:updated` WS #8165

odeimaiz commented Jul 26, 2025 •

edited

Loading

odeimaiz commented Jul 30, 2025 •

edited

Loading